// 轮播图的设置
//获取事件源
const imgBox=document.querySelector('.imgBox')
const imgData=[
    {url:'./images/imgPlay01.webp'},
    {url:'./images/imgPlay02.webp'},
    {url:'./images/imgPlay03.jpg'},
    {url:'./images/imgPlay04.webp'},
    {url:'./images/imgPlay05.webp'},
]
let i=0
//轮播图设计
//自动播放

let num01=setInterval(function(){
    i++
    i=i>imgData.length-1?0:i
    imgBox.style.background=`no-repeat center/cover url(${imgData[i].url})`
    document.querySelector('.dotBox .active').classList.remove('active')
    // document.querySelector(`.dotBox li:nth-child(${i+1})`).classList.add('active')
    document.querySelector(`.dotBox li:nth-child(${i+1})`).classList.add('active')
},1000)
//鼠标经过轮播图暂停，并显示左右箭头,可进行左右播放，离开时恢复自动播放
//图片与圆点关系复用函数
function imgDot() {
    imgBox.style.background=`no-repeat center/cover url(${imgData[i].url})`
    document.querySelector('.dotBox .active').classList.remove('active')
    // document.querySelector(`.dotBox li:nth-child(${i+1})`).classList.add('active')
    document.querySelector(`.dotBox li:nth-child(${i+1})`).classList.add('active')
}

const icon=document.querySelectorAll('.icon')
imgBox.addEventListener('mouseenter',function(){
    icon[0].style.display='block'
    icon[1].style.display='block'
    clearInterval(num01)
})
imgBox.addEventListener('mouseleave',function(){
    icon[0].style.display='none'
    icon[1].style.display='none'
    num01=setInterval(function(){
        i++
        i=i>imgData.length-1?0:i
        imgBox.style.background=`no-repeat center/cover url(${imgData[i].url})`
        imgDot()
    },1000)
})
//左右箭头点击事件
const leftGo=document.querySelector('.imgLeftGo')
const rightGo=document.querySelector('.imgRightGo')

rightGo.addEventListener('click',function(){
    i++
    i=i>imgData.length-1?0:i
    imgDot()
})
leftGo.addEventListener('click',function() {
    i--
    i=i<0?imgData.length-1:i
    imgDot()
//     const dotLis=document.querySelectorAll('.dotBox li')
//     console.log(dotLis)
})
//圆点点击事件
const dotLis=document.querySelectorAll('.dotBox li')
dotLis.forEach(function(item,index){
    item.addEventListener('click',function(){
        i=index
        imgDot()
    })
})

/* --------------------------------------------------------------- */
//经过使导航栏出现下划线

const navs=document.querySelectorAll('.container-head-middle .middleNav')
// console.log(navs)
for(let i=0;i<navs.length;i++) {
    navs[i].addEventListener('mouseenter',function() {
        // document.querySelector('.container-head-middle .active').classList.remove('active')
       this.classList.add('active')
    //  this.style.borderBottom='2px solid #1e80ff'
    })
}
//离开时恢复默认
for(let i=0;i<navs.length;i++) {
    navs[i].addEventListener('mouseleave',function() {
        this.classList.remove('active')
    })
}
/* ============================================= */
//推荐和最新的下划线的左右滚动
// const recommend=document.querySelector('.recommend')
// const mostHot=document.querySelector('.mostHot')
//运用事件委托
const twoNav=document.querySelector('.twoNav')
console.log(twoNav);

const line=document.querySelector('.twoNav .line')
// console.log(line);
twoNav.addEventListener('click',function(e){
    // console.log(11);
    if(e.target.tagName === 'A') {
       //点击时，让下划线移动到对应的位置
        line.style.transform=`translateX(${e.target.offsetLeft}px)`
    }
    
}) 
/* ========================================================================= */
// const date = new Date()
// console.log(date)